<script setup lang="ts">
import { reactive, computed } from 'vue';

type Shop = {
  name: string,
  price: number,
  num: number
}

let data = reactive<Shop[]>([
  {
    name: "耐克衣服",
    price: 889,
    num: 10
  },
  {
    name: "耐克裤子",
    price: 600,
    num: 10
  },
  {
    name: "耐克帽子",
    price: 90,
    num: 10
  },
])

let total = computed(() => {
  return data.reduce((prev, next) => {
    return prev + (next.price * next.num)
  }, 0)
})

let del = (index:number) => {
  data.splice(index, 1)
}
</script>

<template>
  <main>
    <table border style="width: 700px;">
      <thead>
        <tr>
          <th>名称</th>
          <th>单价</th>
          <th>数量</th>
          <th>操作</th>
        </tr>
      </thead>

      <tbody>
        <tr v-for="(item, index) in data" :key="index">
          <td align="center">{{ item.name }}</td>
          <td align="center">{{ item.price }}</td>
          <td align="center"><button @click="item.num--">-</button>{{ item.num }}<button @click="++item.num">+</button></td>
          <td align="center">
            <button @click="del(index)">删除</button>  
          </td>
        </tr>
      </tbody>

      <tfoot>
        <tr>
          <td></td>
          <td></td>
          <td></td>
          <td align="center">总计：{{ total }}</td>
        </tr>
      </tfoot>
    </table>
  </main>
</template>
